<template>
    <div class="homeMain">
        <header>
            <van-nav-bar title="标题" right-text="登录" left-arrow :border="false">
              <template #left>
                <router-link :to="{ name: 'country', params: {back: 'home'} }">
                  <p v-if="!phoName"><van-icon name="location" size="20" /></p>
                  <p v-else>{{ phoName }}</p>
                </router-link>
              </template>
              <template #title>
                <van-search v-model="value" placeholder="请输入搜索关键词" shape="round" background="transparent" />
              </template>
              <template #right>
                <router-link to="/login" v-if="!flag">登录</router-link>
                <router-link to="/user" v-else><van-icon name="user-circle-o" color="white" /></router-link>
              </template>
            </van-nav-bar>
        </header>
        <section class="HomeView" ref="HomeView">
            <van-pull-refresh v-model="refreshing" @refresh="onRefresh" success-text="刷新成功">
            <!-- 轮播图 -->
            <van-swipe :autoplay="3000" lazy-render indicator-color="#e54847">
                <van-swipe-item v-for="item in bannerList" :key="item.bannerid">
                    <img :src="item.img" />
                </van-swipe-item>
            </van-swipe>
            <!-- 列表 -->
            <van-grid :column-num="5" :border="false" >
                <van-grid-item v-for="item in navList" :key="item.navids" :icon="item.imgurl" :text="item.title" />
            </van-grid>
            <!-- 限时抢购 -->
            <div class="countdown">
                <div class="count_top">
                    <div class="conttop_left">
                        <p>嗨购秒杀</p>
                        <van-count-down :time="time">
                            <template #default="timeData">
                                <span class="block">{{ timeData.hours }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.minutes }}</span>
                                <span class="colon">:</span>
                                <span class="block">{{ timeData.seconds }}</span>
                            </template>
                        </van-count-down>
                    </div>
                    <div class="conttop_right">
                        <p>爆款轮番秒<van-icon name="play-circle" /></p>
                    </div>
                </div>
                <ul class="cont_bottom">
                    <router-link tag="li" v-for="item in seckillList" :to="{name: 'detail', params: {id: item.proid}}" :key="item.proid">
                        <van-image
                        width="50"
                        height="50"
                        lazy-load
                        :src="item.img1"
                        />
                        <p>￥1699</p>
                    </router-link>
                </ul>
            </div>
            <!-- 商品列表 -->
            <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad" :immediate-check="false" >
                <pro-list :proList="prolist"></pro-list>
            </van-list>
        </van-pull-refresh>
            <div class="setCliTop" :class="checkName" v-show="scrollTop > 300" @click="comeBack">
                <van-icon name="down" color="white" size="20px" />
            </div>
        </section>
    </div>
</template>
<script>
import Vue from 'vue'
import ProList from '@/components/proList'
import { getBannerList, getNavList, getSeckillList, getProlist } from '@/api/Home'
import { Button, Swipe, SwipeItem, Grid, GridItem, CountDown, Icon, Image as VanImage, Lazyload, PullRefresh, List, NavBar, Search } from 'vant'
Vue.use(Button)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Grid)
Vue.use(GridItem)
Vue.use(CountDown)
Vue.use(Icon)
Vue.use(VanImage)
Vue.use(Lazyload)
Vue.use(PullRefresh)
Vue.use(List)
Vue.use(NavBar)
Vue.use(Search)
export default {
  data () {
    return {
      time: 3 * 60 * 60 * 1000,
      bannerList: [],
      navList: [],
      seckillList: [],
      prolist: [],
      refreshing: false,
      loading: false,
      finished: false,
      number: 2,
      scrollTop: 0,
      checkName: 'show',
      value: '',
      phoName: ''
    }
  },
  computed: {
    flag  () {
      return this.$store.state.userState
    }
  },
  methods: {
    onRefresh () {
      this.refreshing = true
      getProlist().then((res) => {
        this.refreshing = false
        this.prolist = res.data
        this.number = 2
        this.finished = false
      })
    },
    onLoad () {
      this.loading = true
      getProlist({ count: this.number }).then((res) => {
        this.loading = false
        if (res.data.length) {
          this.prolist = [...this.prolist, ...res.data]
          this.number++
        } else {
          this.finished = true
        }
      })
    },
    comeBack () {
      const cont = setInterval(() => {
        if (this.scrollTop <= 0) {
          this.scrollTop = 0
          clearInterval(cont)
        } else {
          this.scrollTop -= 50
        }
        this.$refs.HomeView.scrollTop = this.scrollTop
      }, 1000 / 500)
    }
  },
  mounted () {
    this.phoName = this.$route.params.phoName ? this.$route.params.phoName : ''
    getBannerList().then((res) => {
      this.bannerList = res.data
    })
    this.navList = getNavList()
    getSeckillList().then((res) => {
      this.seckillList = res.data
    })
    getProlist().then((res) => {
      this.prolist = res.data
    })
    this.$refs.HomeView.addEventListener('scroll', () => {
      this.scrollTop = this.$refs.HomeView.scrollTop
      this.checkName = this.scrollTop < 300 ? 'back' : 'show'
    })
  },
  components: {
    ProList
  }
}
</script>
<style lang="stylus" >
.homeMain
  .van-nav-bar__title
    flex 1
    max-width 70%
  .van-nav-bar__content
    height 2.75rem
  .van-nav-bar .van-icon
    color #555
</style>
<style lang="stylus" scoped >
@keyframes show {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}
@keyframes back {
    from {
        opacity: 1
    }
    to {
        opacity: 0
    }
}
.show
    animation show 0.5s
.back
    animation back 0.5s
.HomeView
    background-color rgb(246,246,246)
    flex 1
    overflow auto
    padding-bottom 3.125rem
.homeMain
    flex 1
    display flex
    flex-direction column
    overflow auto
  .van-swipe
      padding-top .625rem
      background linear-gradient(180deg, #e54847, #f6f6f6)
      img
          width: 21.9375rem;
          margin: 0px .625rem;
          border-radius: .3125rem;
  .van-grid-item__content
      background-color rgba(0,0,0,0)
  .list .van-swipe-item
      background-color rgba(0,0,0,0)
  .countdown
      background-color white
      border-radius .625rem
      margin .625rem
      padding .625rem
      box-sizing border-box
      display flex
      flex-direction column
      .count_top
          width 100%
          display flex
          justify-content space-between
          .conttop_left
              display flex
              align-items center
              p
                  margin-right: .625rem
                  font-size .75rem
          .conttop_right
              display flex
              align-items center
              color #e54847
              font-size .75rem
      .cont_bottom
          padding-top .625rem
          display flex
          justify-content space-between
          li
              display flex
              flex-direction column
              align-items center
              p
                  font-size .75rem
                  color #e54847
                  font-weight 600
  .colon
      display inline-block
      margin 0 .25rem
      color #ee0a24
  .block
      display inline-block
      width 1.125rem
      height 1.125rem
      line-height 1.125rem
      color #fff
      font-size .75rem
      text-align center
      background-color #ee0a24
      border-radius .3125rem
  .setCliTop
      position fixed
      bottom 6.25rem
      right 1.25rem
      background-color rgba(0,0,0,0.3)
      border-radius 50%
      width 1.875rem
      height 1.875rem
      display flex
      justify-content center
      align-items center
      transform rotate(180deg)
.van-nav-bar
  background-color #e54847
  p
    color white
    font-size 1rem
.van-search
  padding 0
.van-search .van-cell
  padding .1875rem 0
.van-nav-bar .van-icon
  color white
  font-size 1.5625rem
.van-nav-bar__right a
  color white
  font-size 1rem
</style>
